<template>
	<view class="list">
		<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
		 :activeColor="activeColor" :acsize="acsize">
		</zzx-tabs>

		<view>
			<view>
				<!-- 商品列表信息 -->
				<view v-for="(item,index) in orderList" :key="index" class="pla-body" @click.stop="hanldRegInfo(item.id)">
					<view class="infosetting">
						<text>{{item.created}}</text>
						<text style="color:#FF6001">{{item.status_text}}</text>
					</view>
					<view class='img-list' v-for="(itm,idx) in item.goodslist" :key="idx">
						<view class="pla-img">
							<image :src="itm.images[0]"></image>
						</view>
						<view class="pla-info">
							<view class="ply-name">{{itm.title}}</view>
							<view style="color: #868686;font-size: 12px;padding-top: 10px;">数量：x{{itm.num}}</view>
							<view style="color:#868686;font-size: 12px;padding-top: 10px;">价格 ：{{itm.intergral}} 积分</view>
						</view>
					</view>
					<view class="pla-num">
						<view>总价：{{item.total}}（积分)</view>
					</view>
					<view class="ex-but" @click.stop="showPopup(1,item.id)" v-if="item.status == 1" style="padding: 10px 0;border-top: 1px solid #EFEFF4;">
						<view class="ex-no" style="margin: 0;">取消订单</view>
						<!-- <view class="ex-yes">立即付款</view> -->
					</view>
					<view class="ex-but" @click.stop="showPopup(2,item.id)" v-if="item.status == 2" style="padding: 10px 0;border-top: 1px solid #EFEFF4;">
						<view class="ex-yes">确认收货</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="orderList.length == 0" class="no-more-data">
		  暂无数据
		</view>
		
		<!--取消订单,确认收货-->
		<uni-popup ref="recash" type="center" style="z-index: 999;">
			<view class="cash">
				<!-- <image src="/static/img/dingdan.png" class="cash-img"></image> -->
				<view class="cash-title" v-if="status == 1">取消订单</view>
				<view class="cash-title" v-if="status == 2">确认收货</view>
				<view class="cash-but" @click="cancleConfirmOrder" style="margin-top: 20px;">
					<view class="cash-left">确认</view>
				</view>
				<image @click="closeRecash" src="/static/img/guanbi_icon.png" class="cash-guan"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	import loadRefresh from '@/components/load-refresh/load-refresh.vue'
	export default {
		data() {
			return {
				items: ['全部', '待发货', '待收货', '已完成'],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#FF6001',
				acsize: '14px',

				orderList: [],
				page: 1,
				loadAll: false,
				
				status:1,
				orderId:''
			}
		},
		components: {
			loadRefresh,
			zzxTabs
		},
		onLoad(){
			this.getorderlist()
		},
		onPullDownRefresh() {
		  // console.log('下拉刷新')
		  this.loadAll = false;
		  this.orderList = [];
		  this.page = 1;
		  this.getorderlist();
		},
		onReachBottom() {
		  console.log('上拉加载')
		  if (!this.loadAll) {
		    this.getorderlist();
		  }
		},
		methods: {
			closeRecash() {
				this.$refs.recash.close()
			},
			showPopup(status,id){
				this.$refs.recash.open()
				this.status = status;
				this.orderId = id;
			},
			//取消/确认订单
			cancleConfirmOrder() {
				let params = {
					status: this.status, //1取消 2确认
					id: this.orderId //订单号
				}
				this.$http.cacelconfirm(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 0) {
						this.$refs.recash.close()
						this.loadAll = false;
						this.orderList = [];
						this.page = 1;
						this.getorderlist();
					}
				})
			},
			//订单列表
			getorderlist() {
				let params = {
					status: this.current === 0 ? '' : this.current,
					page: this.page
				}
				this.$http.goods_order(params).then(res => {
					console.log(res)
					uni.stopPullDownRefresh();
					let _list = res.data.data
					let totalPage = res.data.last_page
					if (this.page > totalPage || _list.length == 0) {
						this.loadAll = true
						return
					}
					if (_list.length > 0) {
						this.orderList = this.orderList.concat(_list);
					}
					this.page++;
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.loadAll = false;
				this.orderList = [];
				this.page = 1;
				this.getorderlist();
			},
			hanldRegInfo(id) {
				uni.navigateTo({
					url: 'mallOrderInfo?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.list {
		width: 100%;
		background-color: rgba(246, 246, 246, 1);
	}

	.list>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #FF6001;
	}



	.list>>>.zzx-tabs {
		padding: 5px 0;
		background-color: #fff;
	}

	/**/
	.pla-body {
		border-radius: 4px;
		background-color: #fff;
		margin-bottom: 10px;
		margin-top: 2px;
	}

	.img-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 16px;
	}

	.pla-img {
		margin: 10px;
	}

	.pla-img image {
		width: 90px;
		height: 90px;
		border-radius: 4px;
	}

	.infosetting {
		padding: 12px 16px;
		border-bottom: 1px solid #EFEFF4;
		color: #8A8A8A;
		font-size: 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.pla-num {
		padding-bottom: 10px;
		text-align: right;
		padding-right: 16px;
		color: rgba(36, 36, 36, 1);
		font-size: 12px;
		font-weight: bold;
	}

	.ply-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #242424;
		font-weight: bold;
		font-size: 15px;
	}

	.pla-info {
		width: 480upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.count {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #999999;
		padding: 0 10px;
		align-items: center;
	}

	.red-price {
		font-size: 16px;
	}

	.ex-but {
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
		margin-right: 16px;
	}

	.ex-no {
		width: 160upx;
		height: 58upx;
		border-radius: 30px;
		border: 1px solid rgba(52, 54, 51, 1);
		color: #333333;
		line-height: 58upx;
		text-align: center;
		font-size: 14px;
		margin-right: 10px;

	}

	.ex-yes {
		width: 180upx;
		height: 60upx;
	
	background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius: 30upx;

		color: #fff;
		line-height: 60upx;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
	
	/**/
	.cash {
		height: 226px;
		width: 548upx;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		padding: 0 25px;
		position: relative;
border: 4upx solid #FF6000;
	}
	
	.cash-but {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 50px;
	}
	
	.cash-title {
		color: rgba(48, 52, 76, 1);
		font-weight: bold;
		font-size: 23px;
		padding: 20px 0;
	}
	
	.cash-text {
		color: #666666;
		text-align: left;
		font-size: 14px;
	}
	
	.cash-left {
		width: 555upx;
		height: 88upx;
		
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 4upx 8upx 0px #FFAB71;
		border-radius: 48upx;
		text-align: center;
		line-height: 88upx;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	
	.cash-right {
		width: 228upx;
		height: 34px;
		background: rgba(255, 95, 73, 1);
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		line-height: 34px;
	}
	
	.cash-img {
		width: 54px;
		height: 54px;
		margin-top: -54upx;
	}
	
	.cash-guan {
		width: 21px;
		height: 21px;
		position: absolute;
		right: 20px;
		top: 20px;
	}
</style>
